<template>
  <div class="ecommerce">
  <div class="bg-dark text-white font-sans">
    <!-- 进度条 -->
    <div class="fixed top-0 left-0 w-full z-50 pointer-events-none">
      <div class="progress-line" :style="{ width: progress + '%' }"></div>
    </div>

    <!-- Hero区域 -->
    <section class="relative pt-24 pb-16 bg-darker overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-b from-darker to-dark opacity-50"></div>

      <!-- 装饰元素 -->
      <div class="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-40 -left-20 w-96 h-96 bg-secondary/10 rounded-full blur-3xl"></div>

      <div class="container mx-auto px-4 relative z-10">
        <div class="text-center">
          <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
            电商<span class="text-primary">解决方案</span>
          </h1>
          <p class="text-gray-400 text-lg max-w-2xl mx-auto">
            为电商企业提供全方位的数字化解决方案，助力企业快速发展，提升竞争力
          </p>
        </div>
      </div>
    </section>

    <!-- 解决方案简介 -->
    <section class="py-20 bg-dark">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-3xl md:text-4xl font-bold mb-6">全方位的电商<span class="text-primary">解决方案</span></h2>
            <p class="text-gray-300 mb-6 leading-relaxed">
              狂速科技SAAS电商解决方案是一套针对电商企业的全方位数字化解决方案，涵盖了电商平台建设、商品管理、订单处理、客户服务、营销推广、数据分析等多个环节，帮助企业快速搭建专业电商平台，提升运营效率，降低运营成本。
            </p>
            <p class="text-gray-300 mb-6 leading-relaxed">
              我们的解决方案基于先进的技术架构和设计理念，具有高性能、高稳定性、高安全性等特点，同时支持多平台、多终端访问，满足企业在不同场景下的业务需求。
            </p>
            <p class="text-gray-300 mb-8 leading-relaxed">
              无论您是刚刚起步的电商初创企业，还是已经拥有一定规模的电商企业，狂速科技SAAS电商解决方案都能为您提供量身定制的解决方案，帮助您实现业务增长和数字化转型。
            </p>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
              <div class="bg-card rounded-lg p-4 text-center">
                <div class="text-3xl font-bold text-primary mb-2">{{ counterClients }}</div>
                <div class="text-gray-400 text-sm">电商客户</div>
              </div>
              <div class="bg-card rounded-lg p-4 text-center">
                <div class="text-3xl font-bold text-primary mb-2">{{ counterSales }}</div>
                <div class="text-gray-400 text-sm">年交易额(亿)</div>
              </div>
              <div class="bg-card rounded-lg p-4 text-center">
                <div class="text-3xl font-bold text-primary mb-2">{{ counterProducts }}</div>
                <div class="text-gray-400 text-sm">管理商品数</div>
              </div>
              <div class="bg-card rounded-lg p-4 text-center">
                <div class="text-3xl font-bold text-primary mb-2">{{ counterUsers }}</div>
                <div class="text-gray-400 text-sm">活跃用户数</div>
              </div>
            </div>

            <a href="#contact" class="inline-flex items-center px-8 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
              立即咨询 <i class="fa fa-arrow-right ml-2"></i>
            </a>
          </div>

          <div class="relative">
            <img src="https://picsum.photos/600/700?random=701" alt="电商解决方案" class="w-full h-auto rounded-xl shadow-xl">

            <!-- 装饰元素 -->
            <div class="absolute -bottom-6 -right-6 w-40 h-40 bg-primary/20 rounded-full blur-2xl"></div>
            <div class="absolute -top-6 -left-6 w-20 h-20 bg-secondary/20 rounded-full blur-xl"></div>

            <!-- 浮动卡片 -->
            <div class="absolute -bottom-8 -left-8 bg-card rounded-lg p-6 shadow-xl max-w-xs animate-float">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                  <i class="fa fa-shopping-cart text-xl"></i>
                </div>
                <div class="ml-4">
                  <h4 class="font-bold">全渠道销售</h4>
                  <p class="text-gray-400 text-sm">线上线下一体化</p>
                </div>
              </div>
            </div>

            <div class="absolute -top-8 -right-8 bg-card rounded-lg p-6 shadow-xl max-w-xs animate-float" style="animation-delay: 2s;">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                  <i class="fa fa-line-chart text-xl"></i>
                </div>
                <div class="ml-4">
                  <h4 class="font-bold">智能数据分析</h4>
                  <p class="text-gray-400 text-sm">助力决策优化</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心功能 -->
    <section class="py-20 bg-darker">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">核心<span class="text-primary">功能</span></h2>
          <p class="text-gray-400 max-w-2xl mx-auto">
            狂速科技SAAS电商解决方案的核心功能模块，满足电商业务全流程需求
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 功能1 -->
          <div class="bg-card rounded-xl p-8 hover-lift">
            <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
              <i class="fa fa-shopping-bag"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">商品管理系统</h3>
            <p class="text-gray-400 mb-6">
              提供完善的商品管理功能，包括商品信息录入、分类管理、价格管理、库存管理、图片管理等，支持批量操作和导入导出，方便企业快速上架和管理商品。
            </p>
            <ul class="space-y-2 mb-6">
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>多规格商品管理</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>库存预警提醒</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>商品上下架管理</span>
              </li>
            </ul>
          </div>

          <!-- 功能2 -->
          <div class="bg-card rounded-xl p-8 hover-lift">
            <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
              <i class="fa fa-shopping-cart"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">订单管理系统</h3>
            <p class="text-gray-400 mb-6">
              提供完整的订单处理流程，包括订单创建、支付处理、发货管理、物流跟踪、退换货处理等，支持多种支付方式和物流方式，提高订单处理效率。
            </p>
            <ul class="space-y-2 mb-6">
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>订单状态实时更新</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>批量发货功能</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>订单统计分析</span>
              </li>
            </ul>
          </div>

          <!-- 功能3 -->
          <div class="bg-card rounded-xl p-8 hover-lift">
            <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
              <i class="fa fa-users"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">客户管理系统</h3>
            <p class="text-gray-400 mb-6">
              提供全面的客户信息管理和分析功能，包括客户信息收集、分类管理、行为分析、营销推送等，帮助企业深入了解客户需求，提高客户满意度和忠诚度。
            </p>
            <ul class="space-y-2 mb-6">
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>客户标签体系</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>客户分群管理</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>客户流失预警</span>
              </li>
            </ul>
          </div>

          <!-- 功能4 -->
          <div class="bg-card rounded-xl p-8 hover-lift">
            <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
              <i class="fa fa-bullhorn"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">营销推广系统</h3>
            <p class="text-gray-400 mb-6">
              提供丰富的营销工具和策略，包括促销活动、优惠券、满减活动、限时折扣、会员等级、积分系统等，帮助企业提升销售额和客户转化率。
            </p>
            <ul class="space-y-2 mb-6">
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>多种促销活动类型</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>自动化营销流程</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>营销效果分析</span>
              </li>
            </ul>
          </div>

          <!-- 功能5 -->
          <div class="bg-card rounded-xl p-8 hover-lift">
            <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
              <i class="fa fa-credit-card"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">支付管理系统</h3>
            <p class="text-gray-400 mb-6">
              提供安全、稳定、便捷的支付解决方案，支持多种支付方式，包括微信支付、支付宝、银联支付等，同时提供支付对账、退款处理等功能，保障资金安全。
            </p>
            <ul class="space-y-2 mb-6">
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>多种支付方式集成</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>支付状态实时同步</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>资金流水报表</span>
              </li>
            </ul>
          </div>

          <!-- 功能6 -->
          <div class="bg-card rounded-xl p-8 hover-lift">
            <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
              <i class="fa fa-bar-chart"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">数据分析系统</h3>
            <p class="text-gray-400 mb-6">
              提供全面的数据分析和报表功能，包括销售数据、客户数据、商品数据、营销数据等，支持自定义报表和数据导出，帮助企业做出更明智的决策。
            </p>
            <ul class="space-y-2 mb-6">
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>多维度数据报表</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>数据可视化分析</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span>实时数据监控</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <section class="py-20 bg-dark">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">成功<span class="text-primary">案例</span></h2>
          <p class="text-gray-400 max-w-2xl mx-auto">
            以下是部分使用狂速科技SAAS电商解决方案的成功案例
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="(item, index) in successCases" :key="index" class="bg-card rounded-xl overflow-hidden hover-lift">
            <img :src="item.image" :alt="item.title" class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-4">{{ item.title }}</h3>
              <p class="text-gray-400 mb-6">{{ item.description }}</p>
              <a :href="item.link" class="inline-flex items-center text-primary font-medium hover:underline">
                查看详情 <i class="fa fa-arrow-right ml-2"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术优势 -->
    <section class="py-20 bg-darker">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">技术<span class="text-primary">优势</span></h2>
          <p class="text-gray-400 max-w-2xl mx-auto">
            狂速科技SAAS电商解决方案的技术优势，保障平台稳定高效运行
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="(advantage, index) in technicalAdvantages" :key="index" class="bg-card rounded-xl p-8 hover-lift">
            <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
              <i :class="advantage.icon"></i>
            </div>
            <h3 class="text-xl font-bold mb-4">{{ advantage.title }}</h3>
            <p class="text-gray-400">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 立即咨询 -->
    <section class="py-20 bg-dark">
      <div class="container mx-auto px-4">
        <div class="bg-card rounded-xl p-12 text-center">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">立即<span class="text-primary">咨询</span>我们的电商解决方案</h2>
          <p class="text-gray-400 max-w-2xl mx-auto mb-8">
            无论您是初创企业还是成熟企业，狂速科技SAAS电商解决方案都能满足您的需求。立即联系我们，开启您的电商之旅！
          </p>
          <a href="#contact" class="inline-flex items-center px-8 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
            联系我们 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
      </div>
    </section>
  </div>
    </div>
</template>

<script>
export default {
  name: "EcommerceView",
    layout: "default",
  data() {
    return {
      isMobileMenuOpen: false,
      progress: 0,
      counterClients: 0,
      counterSales: 0,
      counterProducts: 0,
      counterUsers: 0,
      successCases: [
        {
          image: 'https://picsum.photos/600/400?random=801',
          title: 'XX时尚品牌 - 销售额增长300%',
          description: 'XX时尚品牌使用狂速科技SAAS电商解决方案后，通过精准营销和数据分析，销售额在一年内增长了300%，成功拓展了线上市场。',
          link: '#'
        },
        {
          image: 'https://picsum.photos/600/400?random=802',
          title: 'YY生鲜超市 - 客户满意度提升90%',
          description: 'YY生鲜超市借助狂速科技SAAS电商解决方案实现了线上线下一体化运营，客户满意度提升了90%，订单量大幅增长。',
          link: '#'
        },
        {
          image: 'https://picsum.photos/600/400?random=803',
          title: 'ZZ母婴用品 - 会员复购率提高80%',
          description: 'ZZ母婴用品通过狂速科技SAAS电商解决方案的会员管理和营销功能，会员复购率提高了80%，品牌影响力显著提升。',
          link: '#'
        }
      ],
      technicalAdvantages: [
        {
          icon: 'fa fa-rocket',
          title: '高性能架构',
          description: '采用分布式微服务架构，支持高并发访问，保障平台稳定高效运行，确保用户体验流畅。'
        },
        {
          icon: 'fa fa-shield',
          title: '安全可靠',
          description: '多重安全防护机制，包括数据加密、防火墙、防DDoS攻击等，保障企业数据安全和业务稳定。'
        },
        {
          icon: 'fa fa-cogs',
          title: '灵活可扩展',
          description: '模块化设计，支持功能扩展和定制开发，满足企业不同发展阶段的业务需求。'
        },
        {
          icon: 'fa fa-cloud',
          title: '云原生技术',
          description: '基于云原生技术构建，实现自动弹性伸缩，降低运维成本，提高资源利用率。'
        },
        {
          icon: 'fa fa-mobile',
          title: '多端适配',
          description: '支持PC、移动端、小程序等多端访问，实现全渠道覆盖，提升用户购物体验。'
        },
        {
          icon: 'fa fa-code',
          title: '前沿技术',
          description: '采用最新的前端和后端技术，保证系统的先进性和可维护性，为企业提供长期的技术支持。'
        }
      ]
    };
  },
  mounted() {
    window.addEventListener('scroll', this.updateProgress);
    this.startCounter();
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.updateProgress);
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    updateProgress() {
      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      this.progress = (winScroll / height) * 100;
    },
    startCounter() {
      const duration = 2000;
      const stepClients = 1000 / (duration / 10);
      const stepSales = 50 / (duration / 10);
      const stepProducts = 5000 / (duration / 10);
      const stepUsers = 2000 / (duration / 10);

      const interval = setInterval(() => {
        if (this.counterClients < 1000) {
          this.counterClients += stepClients;
          if (this.counterClients > 1000) this.counterClients = 1000;
        }
        if (this.counterSales < 50) {
          this.counterSales += stepSales;
          if (this.counterSales > 50) this.counterSales = 50;
        }
        if (this.counterProducts < 5000) {
          this.counterProducts += stepProducts;
          if (this.counterProducts > 5000) this.counterProducts = 5000;
        }
        if (this.counterUsers < 2000) {
          this.counterUsers += stepUsers;
          if (this.counterUsers > 2000) this.counterUsers = 2000;
        }

        if (
          this.counterClients >= 1000 &&
          this.counterSales >= 50 &&
          this.counterProducts >= 5000 &&
          this.counterUsers >= 2000
        ) {
          clearInterval(interval);
        }
      }, 10);
    }
  }
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }
  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
  }
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
}

:root {
  --primary: #48b6ff;
  --secondary: #2e6cf1;
  --dark: #080812;
  --darker: #04040a;
  --card: #1a1a31;
}

body {
  background-color: var(--dark);
  color: white;
  font-family: 'Segoe UI', sans-serif;
}
</style>
